<template>
  <div v-loading="loading" class="gl_contentBox gl_heightFull">
    <div class="gl_mb_15">
      <el-button type="primary" size="mini" @click="addBanner">新增Banner图片</el-button>
    </div>
    <el-table class="gl_table_noBorder gl_mb_15" :data="tableData" stripe size="mini">
      <el-table-column type="index" label="序号" align="center" :width="60" />
      <el-table-column label="Banner图片" :width="180">
        <template slot-scope="{ row }">
          <div class="banner_img">
            <el-image :src="getStaticPhotoUrl(row.imageUrl)" fit="cover" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="linkAddress" label="链接" :min-width="200" />
      <el-table-column prop="creatorName" label="上传者" />
      <el-table-column label="上传时间" :width="180">
        <template slot-scope="{ row }">
          {{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="left" :width="100">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="editBanner(row)">
            <span class="gl_color_primary">编辑</span>
          </el-button>
          <el-button size="mini" type="text" @click="removeBanner(row)">
            <span class="gl_color_error">删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {
  api_GET_EventsManagementBanner,
  api_DELETE_EventsManagementBannerId
} from '@/extend/api/gameswaggerApi/app';
export default {
  data() {
    return {
      loading: false,
      updateForm: {
        imageUrl: '',
        linkAddress: ''
      },
      editId: '',
      operation: '', // 当前进行的操作（新增or编辑）
      tableData: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData(page) {
      var that = this;
      that.loading = true;
      api_GET_EventsManagementBanner().then(res => {
        that.loading = false;
        that.tableData = res.items;
      }, (error) => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error.message || '获取数据失败' });
      });
    },
    // 添加
    addBanner() {
      // this.updateForm = {
      //   imageUrl: '',
      //   linkAddress: ''
      // };
      // this.operation = 'add';
      // this.$refs.bannerCropper.open(this.updateForm.imageUrl);
      this.$router.push({
        path: `addBanner`
      });
    },
    // 删除
    removeBanner(row) {
      var that = this;
      that.$confirm(`您确定要删除此条数据吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_DELETE_EventsManagementBannerId(row.id).then(() => {
          that.getData();
          that.$message({ type: 'success', message: '删除成功！' });
        }, error => {
          that.$message({ type: 'error', message: '删除失败！' + (error.error && error.error.message || '') });
        });
      });
    },
    // 编辑
    editBanner(row) {
      // this.updateForm = {
      //   imageUrl: '',
      //   linkAddress: ''
      // };
      // this.editId = row.id;
      // this.operation = 'edit';
      // this.updateForm.linkAddress = row.linkAddress;
      this.$router.push({
        path: `addBanner`,
        query: {
          bannerId: row.id,
          imageUrl: row.imageUrl,
          linkAddress: row.linkAddress
        }
      });
    },
    // banner图片和链接
    // bannerPhotoCropperSave(data) {
    //   this.$set(this.updateForm, 'imageUrl', data[0].tempUrl);
    //   this.$set(this.updateForm, 'linkAddress', data[1]);
    //   var that = this;
    //   if (this.operation === 'add') {
    //     api_POST_EventsManagementBanner(that.updateForm).then(res => {
    //       if (res) {
    //         that.$message({ type: 'success', message: '添加成功' });
    //         that.getData();
    //       }
    //     }, (error) => {
    //       that.$message({ type: 'error', message: error.error.message || '添加失败' });
    //     });
    //   } else if (this.operation === 'edit') {
    //     api_PUT_EventsManagementBannerId(that.editId, that.updateForm).then(res => {
    //       if (res) {
    //         that.$message({ type: 'success', message: '编辑成功' });
    //         that.getData();
    //       }
    //     }, (error) => {
    //       that.$message({ type: 'error', message: error.error.message || '编辑失败' });
    //     });
    //   }
    // },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style scoped>
.banner_img {
  width: 140px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
}
.banner_img img {
  width: 100%;
  height: 100%;
}
</style>
